29 สิงหาคม 2568ไทย

ฝึกฝน React useFormStatus hook เพื่อการจัดการการส่งฟอร์มที่ราบรื่น การติดตามความคืบหน้า และสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น เรียนรู้วิธีสร้างฟอร์มที่เสถียรและใช้งานง่าย

React useFormStatus: คู่มือฉบับสมบูรณ์สำหรับการจัดการสถานะการส่งฟอร์มและการติดตามความคืบหน้า

ฟอร์มเป็นหัวใจสำคัญของเว็บแอปพลิเคชันจำนวนนับไม่ถ้วน และเป็นอินเทอร์เฟซหลักสำหรับการโต้ตอบของผู้ใช้ อย่างไรก็ตาม การจัดการการส่งฟอร์ม การจัดการข้อผิดพลาด และการให้ข้อมูลป้อนกลับแก่ผู้ใช้ อาจเป็นงานที่ซับซ้อน hook ของ React อย่าง useFormStatus ช่วยให้กระบวนการนี้ง่ายขึ้น โดยนำเสนอวิธีการที่คล่องตัวในการติดตามสถานะการส่งฟอร์มและมอบประสบการณ์ผู้ใช้ที่เป็นธรรมชาติยิ่งขึ้น

`useFormStatus` คืออะไร?

useFormStatus เป็น hook ที่เปิดตัวใน React 18 ซึ่งออกแบบมาเพื่อให้ข้อมูลเกี่ยวกับสถานะการส่งขององค์ประกอบ <form> ช่วยให้คุณสามารถระบุได้ว่าฟอร์มกำลังอยู่ในระหว่างการส่ง ส่งสำเร็จแล้ว หรือพบข้อผิดพลาดระหว่างการส่ง ข้อมูลนี้สามารถนำไปใช้เพื่ออัปเดต UI, ปิดการใช้งานปุ่ม, แสดงตัวบ่งชี้การโหลด หรือแสดงข้อความข้อผิดพลาดแก่ผู้ใช้

ประโยชน์หลักของการใช้ `useFormStatus`:

การจัดการสถานะฟอร์มที่ง่ายขึ้น: ไม่จำเป็นต้องจัดการสถานะสำหรับการส่งฟอร์มด้วยตนเอง ทำให้ลดโค้ด boilerplate ลงได้
ประสบการณ์ผู้ใช้ที่ดีขึ้น: ให้ข้อมูลป้อนกลับแก่ผู้ใช้แบบเรียลไทม์ระหว่างการส่งฟอร์ม เพิ่มความสะดวกในการใช้งาน
การเข้าถึงที่ดีขึ้น: ช่วยให้การโต้ตอบกับฟอร์มสามารถเข้าถึงได้ง่ายขึ้นโดยการปิดใช้งานองค์ประกอบของฟอร์มระหว่างการส่งและแสดงข้อความข้อผิดพลาดที่ชัดเจน
ประสิทธิภาพที่ดีขึ้น: ติดตามสถานะการส่งฟอร์มอย่างมีประสิทธิภาพ ป้องกันการ re-render ที่ไม่จำเป็น

`useFormStatus` ทำงานอย่างไร

hook useFormStatus ถูกใช้ภายในคอมโพเนนต์ React ที่เรนเดอร์องค์ประกอบ <form> hook นี้จะคืนค่าออบเจ็กต์ที่มีคุณสมบัติดังต่อไปนี้:

pending: ค่าบูลีนที่ระบุว่าฟอร์มกำลังอยู่ในระหว่างการส่งหรือไม่
data: ข้อมูลที่ส่งคืนโดยฟังก์ชัน action ของฟอร์ม (หากสำเร็จ)
method: เมธอด HTTP ที่ใช้สำหรับการส่งฟอร์ม (เช่น "POST", "GET")
action: ฟังก์ชันที่ถูกเรียกเมื่อฟอร์มถูกส่ง
error: ออบเจ็กต์ข้อผิดพลาดหากการส่งฟอร์มล้มเหลว

ในการใช้ useFormStatus คุณต้องกำหนดฟังก์ชัน action สำหรับฟอร์มของคุณก่อน ฟังก์ชันนี้จะถูกเรียกเมื่อฟอร์มถูกส่ง ภายในฟังก์ชัน action คุณสามารถดำเนินการประมวลผลข้อมูล การตรวจสอบความถูกต้อง หรือการเรียก API ที่จำเป็นได้ ฟังก์ชัน action ควรคืนค่าที่จะไปอยู่ในคุณสมบัติ data ของ hook useFormStatus หาก action เกิดข้อผิดพลาด (throws an error) ข้อผิดพลาดนั้นจะไปอยู่ในคุณสมบัติ error

ตัวอย่างการใช้งานจริงของ `useFormStatus`

ตัวอย่างที่ 1: การติดตามการส่งฟอร์มพื้นฐาน

ตัวอย่างนี้สาธิตวิธีการใช้ useFormStatus เพื่อติดตามสถานะการส่งของฟอร์มติดต่ออย่างง่าย ตัวอย่างนี้ทำงานใน React Server Component (RSC) ซึ่งต้องการเฟรมเวิร์กอย่าง Next.js หรือ Remix


// app/contact/page.tsx (Next.js)
'use client';

import { useFormStatus } from 'react-dom';

async function submitForm(formData: FormData) {
  "use server";
  // Simulate an API call
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  if (!name || !email || !message) {
    throw new Error('Please fill in all fields.');
  }

  console.log('Form Data:', { name, email, message });
  return { message: 'Form submitted successfully!' };
}

export default function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      Name:
      


      Email:
      


      Message:
      


      

      {data && {data.message}}
      {error && Error: {error.message}}
    
  );
}

ในตัวอย่างนี้ สถานะ pending ถูกใช้เพื่อปิดการใช้งาน input ของฟอร์มและปุ่ม submit ในขณะที่ฟอร์มกำลังส่ง นอกจากนี้ยังเปลี่ยนข้อความบนปุ่มเป็น "Submitting..." แบบไดนามิกเพื่อให้ผู้ใช้เห็นภาพตอบรับ เมื่อสำเร็จ ข้อมูล data จาก submitForm action จะถูกแสดงขึ้น หากเกิดข้อผิดพลาดระหว่างการส่ง ข้อความ error จะถูกแสดงให้ผู้ใช้เห็น

ตัวอย่างที่ 2: การแสดงตัวบ่งชี้การโหลด

ตัวอย่างนี้สาธิตวิธีการแสดงตัวบ่งชี้การโหลดในขณะที่ฟอร์มกำลังส่ง ซึ่งมีประโยชน์อย่างยิ่งสำหรับฟอร์มที่เกี่ยวข้องกับการเรียก API ที่ใช้เวลานานหรือการประมวลผลข้อมูลที่ซับซ้อน


// Similar component structure as Example 1
export default function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      {/* ... form inputs ... */}

      

      {pending && Loading...} {/* Show loading indicator */}

      {data && {data.message}}
      {error && Error: {error.message}}
    
  );
}

ในตัวอย่างนี้ ข้อความ "Loading..." อย่างง่ายจะแสดงขึ้นเมื่อสถานะ pending เป็น true คุณสามารถแทนที่สิ่งนี้ด้วยตัวบ่งชี้การโหลดที่ซับซ้อนกว่า เช่น spinner หรือ progress bar

ตัวอย่างที่ 3: การจัดการข้อผิดพลาดจากการตรวจสอบความถูกต้องของฟอร์ม

ตัวอย่างนี้สาธิตวิธีการจัดการข้อผิดพลาดในการตรวจสอบความถูกต้องของฟอร์มโดยใช้ useFormStatus ฟังก์ชัน action จะทำการตรวจสอบและ throw error หากมีการละเมิดกฎการตรวจสอบใดๆ


// Similar component structure as Example 1
async function submitForm(formData: FormData) {
  "use server";
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  if (!name) {
    throw new Error('Name is required.');
  }
  if (!email) {
    throw new Error('Email is required.');
  }
  if (!message) {
    throw new Error('Message is required.');
  }

  // Simulate an API call
  await new Promise((resolve) => setTimeout(resolve, 2000));

  console.log('Form Data:', { name, email, message });
  return { message: 'Form submitted successfully!' };
}

export default function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      {/* ... form inputs ... */}

      

      {error && Error: {error.message}} {/* Display error message */}
    
  );
}

ในตัวอย่างนี้ ฟังก์ชัน action จะตรวจสอบว่าฟิลด์ชื่อ อีเมล และข้อความว่างเปล่าหรือไม่ หากฟิลด์ใดฟิลด์หนึ่งว่างเปล่า มันจะ throw error พร้อมข้อความที่สอดคล้องกัน คุณสมบัติ error ของ hook useFormStatus จะถูกใช้เพื่อแสดงข้อความข้อผิดพลาดแก่ผู้ใช้

กรณีการใช้งานขั้นสูงและข้อควรพิจารณา

การผนวกรวมกับไลบรารีฟอร์มของบุคคลที่สาม

แม้ว่า useFormStatus จะเป็นโซลูชันพื้นฐานสำหรับติดตามสถานะการส่งฟอร์ม แต่ก็สามารถผนวกรวมกับไลบรารีฟอร์มของบุคคลที่สามเช่น Formik หรือ React Hook Form ได้ ไลบรารีเหล่านี้มีคุณสมบัติขั้นสูงกว่า เช่น การตรวจสอบความถูกต้องของฟอร์ม การจัดการฟิลด์ และการจัดการสถานะ ด้วยการรวม useFormStatus เข้ากับไลบรารีเหล่านี้ คุณสามารถสร้างฟอร์มที่ปรับแต่งได้สูงและมีความเสถียร

ในการผนวกรวมกับ Formik หรือ React Hook Form คุณสามารถใช้ประโยชน์จากตัวจัดการการส่งฟอร์มของแต่ละไลบรารีและใช้ useFormStatus เพื่อติดตามสถานะการส่งโดยรวม คุณอาจยังคงต้องสร้าง Server Action แต่การจัดการสถานะฟอร์มฝั่งไคลเอ็นต์จะถูกจัดการโดยไลบรารีที่คุณเลือก

การจัดการการทำงานแบบอะซิงโครนัส

ฟอร์มจำนวนมากเกี่ยวข้องกับการทำงานแบบอะซิงโครนัส เช่น การเรียก API หรือการสืบค้นฐานข้อมูล เมื่อต้องจัดการกับการทำงานแบบอะซิงโครนัส สิ่งสำคัญคือต้องแน่ใจว่าการส่งฟอร์มได้รับการจัดการอย่างถูกต้องและผู้ใช้ได้รับข้อมูลป้อนกลับที่เหมาะสม hook useFormStatus ช่วยให้กระบวนการนี้ง่ายขึ้นโดยการให้สถานะ pending ที่สามารถใช้เพื่อบ่งชี้ว่าฟอร์มกำลังรอให้การทำงานแบบอะซิงโครนัสเสร็จสิ้น

นอกจากนี้ยังจำเป็นอย่างยิ่งที่จะต้องมีการจัดการข้อผิดพลาดที่แข็งแกร่งเพื่อจัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการทำงานแบบอะซิงโครนัสอย่างราบรื่น คุณสมบัติ error ของ hook useFormStatus สามารถใช้เพื่อแสดงข้อความข้อผิดพลาดแก่ผู้ใช้ได้

ข้อควรพิจารณาด้านการเข้าถึง

การเข้าถึงเป็นสิ่งสำคัญอย่างยิ่งในการพัฒนาเว็บ และฟอร์มก็ไม่มีข้อยกเว้น เมื่อสร้างฟอร์ม สิ่งสำคัญคือต้องแน่ใจว่าผู้ใช้ที่มีความพิการสามารถเข้าถึงได้ hook useFormStatus สามารถใช้เพื่อปรับปรุงการเข้าถึงฟอร์มได้โดย:

การปิดใช้งานองค์ประกอบของฟอร์มระหว่างการส่ง: เพื่อป้องกันไม่ให้ผู้ใช้ส่งฟอร์มซ้ำโดยไม่ได้ตั้งใจ
การให้ข้อความข้อผิดพลาดที่ชัดเจน: ข้อความข้อผิดพลาดควรสั้นกระชับ ให้ข้อมูล และเข้าใจง่าย นอกจากนี้ยังควรเชื่อมโยงกับฟิลด์ฟอร์มที่เกี่ยวข้องโดยใช้แอตทริบิวต์ ARIA
การใช้แอตทริบิวต์ ARIA: แอตทริบิวต์ ARIA สามารถใช้เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับฟอร์มและองค์ประกอบของมันแก่เทคโนโลยีช่วยเหลือ ตัวอย่างเช่น แอตทริบิวต์ aria-describedby สามารถใช้เพื่อเชื่อมโยงข้อความข้อผิดพลาดกับฟิลด์ฟอร์มได้

การเพิ่มประสิทธิภาพ

แม้ว่า useFormStatus โดยทั่วไปจะมีประสิทธิภาพ แต่สิ่งสำคัญคือต้องพิจารณาถึงผลกระทบด้านประสิทธิภาพเมื่อสร้างฟอร์มที่ซับซ้อน หลีกเลี่ยงการคำนวณที่สิ้นเปลืองทรัพยากรหรือการเรียก API ภายในคอมโพเนนต์ที่ใช้ useFormStatus แต่ควรมอบหมายงานเหล่านี้ให้กับฟังก์ชัน action

นอกจากนี้ ควรระวังการ re-render ที่ไม่จำเป็น ใช้เทคนิค memoization ของ React (เช่น React.memo, useMemo, useCallback) เพื่อป้องกันไม่ให้คอมโพเนนต์ re-render เว้นแต่ว่า props ของมันมีการเปลี่ยนแปลง

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ `useFormStatus`

ทำให้ฟังก์ชัน action ของคุณสั้นกระชับและมุ่งเน้น: ฟังก์ชัน action ควรจัดการกับการประมวลผลข้อมูล การตรวจสอบความถูกต้อง และการเรียก API เป็นหลัก หลีกเลี่ยงการอัปเดต UI ที่ซับซ้อนหรือผลข้างเคียงอื่นๆ ภายในฟังก์ชัน action
ให้ข้อมูลป้อนกลับที่ชัดเจนและให้ข้อมูลแก่ผู้ใช้: ใช้คุณสมบัติ pending, data, และ error ของ hook useFormStatus เพื่อให้ข้อมูลป้อนกลับแก่ผู้ใช้แบบเรียลไทม์ระหว่างการส่งฟอร์ม
มีการจัดการข้อผิดพลาดที่แข็งแกร่ง: จัดการกับข้อผิดพลาดที่อาจเกิดขึ้นระหว่างการส่งฟอร์มอย่างราบรื่นและให้ข้อความข้อผิดพลาดที่เป็นประโยชน์แก่ผู้ใช้
คำนึงถึงการเข้าถึง: ตรวจสอบให้แน่ใจว่าฟอร์มของคุณสามารถเข้าถึงได้โดยผู้ใช้ที่มีความพิการโดยปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึง
เพิ่มประสิทธิภาพ: หลีกเลี่ยงการ re-render ที่ไม่จำเป็นและการคำนวณที่สิ้นเปลืองทรัพยากรภายในคอมโพเนนต์ที่ใช้ useFormStatus

การใช้งานจริงและตัวอย่างจากทั่วโลก

hook useFormStatus สามารถนำไปใช้กับสถานการณ์ต่างๆ ที่เกี่ยวข้องกับฟอร์มในอุตสาหกรรมและพื้นที่ทางภูมิศาสตร์ที่แตกต่างกัน นี่คือตัวอย่างบางส่วน:

อีคอมเมิร์ซ (ทั่วโลก): ร้านค้าออนไลน์สามารถใช้ useFormStatus เพื่อติดตามการส่งฟอร์มคำสั่งซื้อ สถานะ pending สามารถใช้เพื่อปิดใช้งานปุ่ม "สั่งซื้อ" ในขณะที่กำลังประมวลผลคำสั่งซื้อ และสถานะ error สามารถใช้เพื่อแสดงข้อความข้อผิดพลาดหากการสั่งซื้อล้มเหลว (เช่น เนื่องจากปัญหาการชำระเงินหรือสินค้าหมด)
การดูแลสุขภาพ (ยุโรป): ผู้ให้บริการด้านสุขภาพสามารถใช้ useFormStatus เพื่อติดตามการส่งฟอร์มลงทะเบียนผู้ป่วย สถานะ pending สามารถใช้เพื่อแสดงตัวบ่งชี้การโหลดในขณะที่ข้อมูลของผู้ป่วยกำลังถูกประมวลผล และสถานะ data สามารถใช้เพื่อแสดงข้อความยืนยันเมื่อลงทะเบียนสำเร็จ การปฏิบัติตาม GDPR (ระเบียบการคุ้มครองข้อมูลทั่วไป) เป็นสิ่งสำคัญยิ่ง และข้อความข้อผิดพลาดที่เกี่ยวข้องกับการละเมิดความเป็นส่วนตัวของข้อมูลจะต้องได้รับการจัดการอย่างระมัดระวัง
การศึกษา (เอเชีย): แพลตฟอร์มการเรียนรู้ออนไลน์สามารถใช้ useFormStatus เพื่อติดตามการส่งการบ้านที่อัปโหลด สถานะ pending สามารถใช้เพื่อปิดใช้งานปุ่ม "ส่ง" ในขณะที่กำลังอัปโหลดงาน และสถานะ error สามารถใช้เพื่อแสดงข้อความข้อผิดพลาดหากการอัปโหลดล้มเหลว (เช่น เนื่องจากข้อจำกัดขนาดไฟล์หรือปัญหาเครือข่าย) แต่ละประเทศอาจมีมาตรฐานทางวิชาการและข้อกำหนดการส่งงานที่แตกต่างกัน ซึ่งฟอร์มต้องรองรับได้
บริการทางการเงิน (อเมริกาเหนือ): ธนาคารสามารถใช้ useFormStatus เพื่อติดตามการส่งฟอร์มใบสมัครสินเชื่อ สถานะ pending สามารถใช้เพื่อแสดงตัวบ่งชี้การโหลดในขณะที่กำลังประมวลผลใบสมัคร และสถานะ data สามารถใช้เพื่อแสดงสถานะการอนุมัติสินเชื่อ การปฏิบัติตามกฎระเบียบทางการเงิน (เช่น KYC - Know Your Customer) เป็นสิ่งสำคัญ และข้อความข้อผิดพลาดที่เกี่ยวข้องกับปัญหาการปฏิบัติตามกฎระเบียบจะต้องชัดเจนและเฉพาะเจาะจง
บริการภาครัฐ (อเมริกาใต้): หน่วยงานของรัฐสามารถใช้ useFormStatus เพื่อติดตามการส่งฟอร์มความคิดเห็นของประชาชน สถานะ pending สามารถใช้เพื่อปิดใช้งานปุ่ม "ส่ง" ในขณะที่กำลังประมวลผลความคิดเห็น และสถานะ data สามารถใช้เพื่อแสดงข้อความยืนยันเมื่อส่งสำเร็จ การเข้าถึงเป็นสิ่งสำคัญ เนื่องจากประชาชนอาจมีความรู้ความสามารถด้านดิจิทัลและการเข้าถึงเทคโนโลยีในระดับที่แตกต่างกัน ฟอร์มจะต้องมีให้บริการในหลายภาษา

การแก้ไขปัญหาที่พบบ่อย

useFormStatus ไม่ได้อัปเดต: ตรวจสอบให้แน่ใจว่าคุณใช้ React 18 หรือใหม่กว่า และฟอร์มของคุณมี action ที่กำหนดไว้อย่างถูกต้อง ตรวจสอบว่า Server Action ของคุณถูกกำหนดอย่างถูกต้องโดยใช้ directive "use server"
ข้อความข้อผิดพลาดไม่แสดง: ตรวจสอบอีกครั้งว่าฟังก์ชัน action ของคุณ throw errors อย่างถูกต้อง และคุณกำลังแสดง error.message ในคอมโพเนนต์ของคุณ ตรวจสอบคอนโซลเพื่อหาข้อผิดพลาดใดๆ ระหว่างการส่งฟอร์ม
ฟอร์มส่งหลายครั้ง: ตรวจสอบให้แน่ใจว่าปุ่ม submit ของคุณถูกปิดใช้งานโดยใช้สถานะ pending เพื่อป้องกันการดับเบิลคลิกโดยไม่ตั้งใจ

สรุป

hook useFormStatus ของ React เป็นวิธีที่ทรงพลังและสะดวกในการติดตามสถานะการส่งฟอร์มและมอบประสบการณ์ผู้ใช้ที่ดีขึ้น ด้วยการทำให้การจัดการสถานะฟอร์มง่ายขึ้น เพิ่มการเข้าถึง และเพิ่มประสิทธิภาพ useFormStatus ช่วยให้นักพัฒนาสามารถสร้างฟอร์มที่แข็งแกร่งและใช้งานง่าย ด้วยความเข้าใจในความสามารถและแนวทางปฏิบัติที่ดีที่สุด คุณสามารถใช้ประโยชน์จาก useFormStatus เพื่อสร้างการโต้ตอบกับฟอร์มที่ราบรื่นและน่าสนใจในแอปพลิเคชัน React ของคุณ